<template>
    <div class="refund_deta">
        <div class="status">
            <img src="@/assets/image/r1.png" alt="">
            <div class="msg">{{ $t('mall.退款进行中') }}</div>
        </div>
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="key">{{item.name}}</div>
            <div class="value">{{item.value}}</div>
        </div>
       
        <div class="sub_title">{{ $t('mall.退款进度') }}</div>
        <div>
            <el-timeline>
                <el-timeline-item v-for="(item, index) in process" :key="index" :timestamp="item.value">
                    {{ item.name }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        order_id: {
            type: [String, Number],
            default: ""
        },
        type: String
    },
    data() {
        return {
          


            list: [],
            process: []
        };
    },
    watch: {
        order_id: {
            handler(value) {
                this.getDeta(value);
            },
            immediate: true
        }
    },
    methods: {
        async getDeta(order_id) {
            let { refund } = await this.$api.shopApi.refundDetail({
                order_id
            });
            this.list = refund.info;
            let process = refund.process;
            this.process = process;
        },
    }
};
</script>

<style lang="scss" scoped>
.refund_deta {
    .status {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 83px;
            height: 83px;
        }

        .msg {
            font-size: 18px;
            color: #333333;
            margin-top: 12px;
        }
    }

    .item {
        background: #F5F5F5;
        border-radius: 8px 8px 8px 8px;
        margin-bottom: 16px;
        padding: 16px 8px;
        box-sizing: border-box;

        .key {
            font-size: 14px;
            color: #7F7F7F;
        }

        .value {
            font-size: 16px;
            color: #333333;
            margin-top: 6px;
        }
    }

    .sub_title {
        margin-bottom: 24px;
    }
}
</style>